<template>
    <div class="copReg">
        <el-form class="user-layout-login" ref="formLogin" :model="createForm" :rules="rules" label-width="100px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item prop="phone" label="手机号">
                        <el-input size="large" prefix-icon="el-icon-phone-outline" v-model.trim="createForm.phone" type="text"
                        placeholder="请输入手机号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="verificationCode" label="短信验证码" class="verificationCodeClass">
                        <el-input size="large" prefix-icon="el-icon-user" v-model.trim="createForm.verificationCode" type="text" placeholder="短信验证码" />
                        <el-button @click.prevent="removeDomain(domain)" type="primary">发送验证码</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="password"  label="密码">
                        <el-input size="large" prefix-icon="el-icon-lock" v-model.trim="createForm.password" type="password" placeholder="请输入密码" show-password>
                    </el-input>
                    </el-form-item>                   
                </el-col>
                <el-col :span="12">
                    <el-form-item prop="rePassword"  label="确认密码">
                        <el-input size="large" prefix-icon="el-icon-lock" v-model.trim="createForm.rePassword" type="password" placeholder="请确认密码" show-password>
                        </el-input>
                    </el-form-item>
                </el-col> 
            </el-row>
            <el-form-item style="margin-top:24px">
              <el-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn"
                @click.stop.prevent="handleSubmit('formLogin')" :disabled="loginBtn">提交</el-button>
            </el-form-item>
            <el-form-item style="margin-top:24px">
              <div class="register">
                <span @click="flipCard('back')">去登录</span>
              </div>
            </el-form-item>
          </el-form>        
    </div>
</template>

<script>
export default {
    data(){
        var validatePhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入手机号'));
            }
            const reg = /^1[3-9]\d{9}$/;
            if (!reg.test(value)) {
                return callback(new Error('请输入正确的手机号'));
            }
            callback();
        }
        return {
            loginBtn: false,
            createForm: {
                phone: "",
                password: "",
                verificationCode: '',
                rePassword: ''
            },
            rules: {
                phone: [
                    { required: true, validator: validatePhone, trigger: 'blur' },
                ],
                verificationCode: [
                    { required: true, message: "请输入短信验证码", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { max: 20, message: "字数不超过20", trigger: "blur" },
                ],
                rePassword: [
                    { required: true, message: "请确认密码", trigger: "blur" },
                    { max: 20, message: "字数不超过20", trigger: "blur" },
                ]
            },

        }
    },
    methods: {
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        flipCard(id){
            const doc_front = document.getElementById('front');
            const doc_back = document.getElementById('back');
            const doc_main = document.getElementById('main');
            if(id === 'front'){
                doc_front.classList.add('opty0');
                doc_front.classList.remove('opty1');
                doc_back.classList.add('opty1');
                doc_back.classList.remove('opty0');
                doc_main.classList.add('mainBack')
            }else{
                doc_front.classList.add('opty1');
                doc_front.classList.remove('opty0');
                doc_back.classList.add('opty0');
                doc_back.classList.remove('opty1');
                doc_main.classList.remove('mainBack')
            }
            this.resetForm('formLogin')
        },
        handleSubmit (formData) {
            let that = this
            this.$refs[formData].validate((valid) => {
                if (valid) {
                let str = "(" + this.createForm.loginName + ")|(" + this.createForm.password + ")";
                str = Sm3Utils.encryptFromText(str);
                let encData = new Sm2Utils().encryptFromText(defaultSettings.publicKey, this.createForm.loginName + "|" + this.createForm.password + "|" + new Date().getTime() + "|" + str);
                let params = {
                    encData: encData
                }
                this.Login(params).then((res) => {
                    const data = res.data
                    if (data.code == 0) {
                    this.loginSuccess(data)
                    } else {
                    this.requestFailed(data)
                    }
                })
                } else {
                that.loginBtn = false;
                }
            });
        }
    }

}
</script>

<style lang="scss" scoped>
/deep/ .verificationCodeClass{
    .el-form-item__content{
        display: flex;
        .el-button{
            margin-left: 30px;
        }
    }
}
.copReg{
    .login-button {
        padding: 0 15px;
        font-size: 16px;
        height: 40px;
        width: 100%;
    }
    .register{
        display: flex;
        flex-direction:row-reverse;
        color: #3F9EFF;
        cursor: pointer;
        > span{
            position: relative;
            text-decoration: none;
            &::after{
            content: '';
            position: absolute;
            bottom: -2px;
            right: 0;
            width: 0;
            height: 2px;
            background-color: #3F9EFF;
            transition: width 0.2s ease-in-out;
        }
            &:hover::after {
            width: 100%;
            }
        }
    }
}
</style>